<template>
  <div class="content-box">
    <div ref="searchBox" class="search-box flex" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="产品名称" style="margin-right: 20px" prop="productName">
          <el-input
            v-model="queryParams.productName"
            placeholder="请输入"
            style="width: 240px; margin-right: 20px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="关联公司"
          style="margin-right: 20px"
          prop="companyIds"
        >
          <el-select
            v-model="queryParams.companyIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px;margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in companyIdOption"
              :key="index"
              :label="item.companyName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="状态"
          style="margin-right: 20px"
          prop="status"
        >
          <el-select
            v-model="queryParams.status"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in statusOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="管理人"
          style="margin-right: 20px"
          prop="manageUserIds"
        >
          <el-select
            v-model="queryParams.manageUserIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择管理人"
           style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in manageOptionList"
              :key="index"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="产品类型"
          style="margin-right: 20px"
          prop="productType"
        >
          <el-select
            v-model="queryParams.productType"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in productTypeOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item
          label="产品标签"
          style="margin-right: 20px"
          prop="productLabel"
        >
          <el-select
            v-model="queryParams.productLabel"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in productLabelOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="查询时间"
          prop="dateRange"
        >
          <el-date-picker
            :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
            clearable
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            plain
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-hasPermi="['business:product:add']"
            @click="handelDialog('添加', null)"
            >添加产品</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="handleQuery"
          :columns="columns"
        ></right-toolbar>
      </el-row>
      <el-table
        v-sticky-header
        ref="table"
        v-loading="loading"
        :data="dataList"
      >
        <template v-for="(item,index) in columns.slice(0,columns.length - 1)">
          <el-table-column
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :width="getColumnWidth(index,'columns')"
            align="center"
            :fixed="item.fixed"
            :sortable="item.sortable ? item.sortable : false"
            :show-overflow-tooltip="item.showTooltip"
            v-if="item.visible"
          >
            <template slot-scope="scope">
              <!-- 产品标签单独处理 -->
              <template v-if="item.prop === 'productLabel'">
                <el-tag 
                  :type="productLabelColor(scope.row[item.prop])" 
                  >
                  {{ ArrayFormatObj(productLabelOption)[scope.row[item.prop]]}}
                </el-tag>
              </template>
              <!--产品上下线状态显示单独处理 -->
              <div v-else-if="item.prop === 'status'" @click="showOrOffPopo(scope.row)">
                <el-popover
                  placement="top"
                  title="上下线状态操作"
                  :value ="rowIndex === scope.row.id"
                  trigger="click"
                  @hide="popoverHide"
                  >
                  <el-form >
                    <el-form-item style="margin-bottom: 5px;">
                      <el-radio-group v-removeAriaHidden v-model="upAndDownLinesStates" >
                        <el-radio 
                         v-for="(item,index) in statusOption" 
                        :key="index" :label="item.value">{{ item.label }}
                      </el-radio>
                     </el-radio-group>
                    </el-form-item>
                    <el-form-item style="display: flex;justify-content: center;margin-bottom: 5px;">
                      <el-button type="primary" @click="clickSubmitOnOrOff(scope.row)">提交</el-button>
                      <el-button @click="clickCancelOnOrOff(scope.row)">取消</el-button>
                    </el-form-item>
                  </el-form>
                  <el-button 
                     slot="reference"
                     :style="{
                      color:'#fff',
                      borderColor:statusColor(scope.row[item.prop]),
                      backgroundColor:statusColor(scope.row[item.prop])
                    }"
                     size="mini" 
                   >{{ ArrayFormatObj(statusOption)[scope.row[item.prop]]}}</el-button>
                </el-popover> 
              </div>
              <!--自动回调状态单独处理 -->
              <div v-else-if="item.prop === 'isAuto'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeIsAuto(scope.row)"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'primary' : 'warning'"
                    size="mini"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
               <!--同步锁状态单独处理 -->
               <div v-else-if="item.prop === 'asyncLock'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeAsyncLock(scope.row)"
                >
                  <el-button
                    slot="reference"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#00d8f4':'#ff116e',
                      borderColor: scope.row[item.prop]?'#00d8f4':'#ff116e'
                    }"
                    size="mini"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <!--手机号屏蔽单独处理 -->
              <div v-else-if="item.prop === 'isShield'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeisShield(scope.row)"
                >
                  <el-button
                    slot="reference"
                    size="mini"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#81663B':'#5AA4AE',
                      borderColor: scope.row[item.prop]?'#81663B':'#5AA4AE',
                    }"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <!-- 星级查询单独处理 -->
               <div v-else-if="item.prop == 'isStartQuery'" @click="showStartQueryPopo(scope.row)">
                <el-popover
                  placement="top"
                  title="星级查询设置"
                  :value ="isStartQueryIndex === scope.row.id"
                  trigger="click"
                  >
                  <el-form style="width: 240px;" :model="isStartQueryParams" :rules="isStartQueryRules" :ref="`startQuery_${scope.row.id}`">
                    <el-form-item label="查询状态" prop="isStartQuery" style="margin-bottom: 0;">
                      <el-switch
                       v-model="isStartQueryParams.isStartQuery"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       active-text="开"
                       inactive-text="关">
                     </el-switch>
                    </el-form-item>
                    <el-form-item label="查询类名" prop="queryClass" style="margin-bottom: 0;">
                      <el-input
                        style="width: 100%"
                        v-model="isStartQueryParams.queryClass"
                        placeholder="请输入"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="查询链接" prop="queryUrl" style="margin-bottom: 10px;">
                      <el-input
                        style="width: 100%"
                        v-model="isStartQueryParams.queryUrl"
                        placeholder="请输入"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item style="display: flex;justify-content: center;margin-bottom: 0;">
                      <el-button type="primary" @click="clickSubmitStartQuery(scope.row,`startQuery_${scope.row.id}`)">提交</el-button>
                      <el-button @click="clickCancelStartQuery(scope.row)">取消</el-button>
                    </el-form-item>
                  </el-form>
                  <el-button 
                     slot="reference"
                     size="mini" 
                     :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#EF845D':'#bb5100',
                      borderColor: scope.row[item.prop]?'#EF845D':'#bb5100'
                    }"
                   >{{ ArrayFormatObj(isStartQueryOption)[scope.row[item.prop]]}}</el-button>
                </el-popover> 
              </div>
              <!--永不下线单独处理 -->
              <div v-else-if="item.prop === 'isOn'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeIsOn(scope.row)"
                >
                  <el-button
                    slot="reference"
                    size="mini"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#D6C560':'#757CBB',
                      borderColor: scope.row[item.prop]?'#D6C560':'#757CBB',
                    }"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
             <!--抽金单独处理 -->
              <div v-else-if="item.prop == 'isExtract'" @click="showIsExtractPopu(scope.row)">
                <el-popover
                  placement="top"
                  title="抽金操作"
                  :value ="extractRowIndex === scope.row.id"
                  trigger="click"
                  >
                  <el-form style="width: 240px;" :model="extractParams" :rules="isExtractRules" :ref="`user_${scope.row.id}`">
                    <el-form-item label="抽金状态" :prop="extractParams.isExtract!=null?'isExtract':''" style="margin-bottom: 0;">
                      <el-radio-group v-removeAriaHidden v-model="extractParams.isExtract" >
                        <el-radio 
                         v-for="(item,index) in isExtractOption" 
                        :key="index" :label="item.value">{{ item.label }}
                      </el-radio>
                     </el-radio-group>
                    </el-form-item>
                    <el-form-item
                      v-if="extractParams.isExtract"
                      label="扣除比例(%)" prop="extractRatio"
                      style="margin-bottom: 10px;"
                    >
                        <el-input-number 
                          v-model="extractParams.extractRatio" 
                          controls-position="right" 
                          placeholder="请输入扣除比例(0~100 %)"
                          :min="0" 
                          :precision="2"
                          style="width: 100%;"
                        >
                        </el-input-number>
                    </el-form-item>
                    <el-form-item style="display: flex;justify-content: center;margin-bottom: 0;">
                      <el-button type="primary" @click="clickSubmitExtract(scope.row,`user_${scope.row.id}`)">提交</el-button>
                      <el-button @click="clickCancelExtract(scope.row)">取消</el-button>
                    </el-form-item>
                  </el-form>
                  <el-button 
                     slot="reference"
                     size="mini" 
                     :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#662b1f':'#92905D',
                      borderColor: scope.row[item.prop]?'#662b1f':'#92905D'
                    }"
                   >{{ ArrayFormatObj(isExtractOption)[scope.row[item.prop]]}}</el-button>
                </el-popover> 
              </div>
              <!--授权映射单独处理 -->
              <div v-else-if="item.prop === 'isFill'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeisAuthFill(scope.row)"
                >
                  <el-button
                    slot="reference"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#68945c':'#535164',
                      borderColor: scope.row[item.prop]?'#68945c':'#535164'
                    }"
                    size="mini"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <!-- 掩码类型单独处理 -->
              <div v-else-if="item.prop === 'maskLen'">
                {{ ArrayFormatObj(maskLenOption)[scope.row[item.prop]] || '-'}}
              </div>
              <!-- 撞库类型单独处理 -->
              <div v-else-if="item.prop === 'isAll'">
                {{ ArrayFormatObj(isAllOption)[scope.row[item.prop]] || '-'}}
              </div>
              <!-- 车抵单独处理 -->
              <div v-else-if="item.prop === 'isCar'">
                {{ ArrayFormatObj(isCarOption)[scope.row[item.prop]] || '-'}}
              </div>
              <span v-else>
                {{  scope.row[item.prop] }}
              </span>
            </template>
        </el-table-column>
        </template>
        <el-table-column
          fixed="right"
          :prop="columns[columns.length - 1].prop"
          :label="columns[columns.length - 1].label"
          align="center"
          :width="getColumnWidth(columns.length - 1,'columns')"
          v-if="columns[columns.length - 1].visible"
        >
          <template slot-scope="scope">
            <div :class="['flex-center','flex']">
                <!-- <el-button
                 type="text"
                 v-hasPermi="['business:product:query']"
                 @click="handelDialog('查看', scope.row)"
                 >查看</el-button
               > -->
               <el-button
                 type="text"
                 v-hasPermi="['business:product:edit']"
                 @click="handelDialog('编辑', scope.row)"
                 >编辑</el-button
               >
               <el-popconfirm
                 title="确定要删除该产品吗？"
                 style="margin:0 10px"
                 @cancel="hanCancelDel"
                 @confirm="handelDel(scope.row)"
                 v-hasPermi="['business:product:remove']"
               >
                  <el-button 
                  slot="reference"
                  type="text"
                  style="color: #ff116e"
                  >删除</el-button>
               </el-popconfirm>
               <el-button
                 type="text"
                 style="color: #006d75"
                 v-if="[2].includes(scope.row['productLabel'])"
                 @click="handelDialog('机构配置', scope.row)"
                 >机构配置</el-button
               >
               <el-button
                 type="text"
                 style="color: #67C23A"
                 @click="handelDialog('上下线管理', scope.row)"
                 >上下线管理</el-button
               >
                <el-button
                 type="text"
                 style="color: #ad6800"
                 v-if="[3].includes(scope.row['productType'])"
                 @click="handelDialog('产品计划', scope.row)"
                 v-hasPermi="['business:product:prodectPlan']"
                 >产品计划</el-button
               >
               <el-button
                 type="text"
                 style="color: #d4380d"
                 v-if="scope.row['downRewardType'] == 0"
                 @click="handelDialog('城市变价', scope.row)"
                 >城市变价</el-button
               >
                <el-button
                 type="text"
                 style="color: #151d29"
                 v-if="scope.row['isFill'] == 1"
                 @click="handelDialog('授权映射', scope.row)"
                 >授权映射</el-button
               >
            </div>
            
          </template>
        </el-table-column>
      </el-table>
      <!-- 使用分页插件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page-sizes="[10, 50, 100, 200, 500]"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 上下线管理 对话框 -->
    <el-dialog
      :title="title"
      :width="device === 'mobile'? '700px' :'80%'"
      :visible.sync="dialogShow"
      :before-close="handleClose"
      :modal="!addTaskShow"
      :close-on-click-modal="!addTaskShow"
    >
      <el-form :model="form" :rules="rules" label-width="140px" ref="formRef" style="width: 100%;height: 78vh;">
        <!-- 上下线相关信息 -->
        <template >
           <!-- 上下线公共区域 -->
           <div class="upAndDownLinesPublic" 
             style="
             border-bottom: 1px solid #dfe6ec;
             margin-bottom: 10px;
             padding-bottom:10px;
             display: flex">
             <div v-for="item in upAndDownLinesShowOption" :key="item.prop" style="margin-right: 20px;display: flex;align-items: center;">
                <span style="margin-right: 5px;"><span>{{ item.label }}:</span></span>
                <span v-if="item.prop === 'statusStr'">
                  <el-tag :type="tagType(productObj.status)">{{  productObj[item.prop] }}</el-tag>
                </span>
                <span v-else>
                  <span style="font-weight: 600;">{{  productObj[item.prop] }}</span>
                </span>
            </div>
           </div>
           <!--上下线管理特殊区域特殊区域 -->
           <div style="width: 100%;height: calc(100% - 40px);">
              <div style="padding:0 0 10px;" v-if="['upAndDownLines'].includes(currentOperation)">
                定时上下线 达到以下设定时间，产品将自动上下线
              </div>
              <div style="display: flex;width: 100%;height: calc(100% - 28px);">
                  <div style="margin-right: 10px;width: 66px;" v-if="['upAndDownLines'].includes(currentOperation)">
                    <el-button
                      type="text"
                      @click="addTask()"
                      style="text-decoration: underline;"
                      v-hasPermi="['product:addTask:add']"
                     >
                     +添加一条
                     </el-button
                    >
                  </div>
                  <!-- 表格区域 -->
                  <div class="TaskTable" style="flex: 1;width: calc(100% - 76px);height: 100%;display: flex;flex-direction: column;">
                    <div ref="TaskSearchBox" class="flex">
                       <el-form
                         :model="onOffTaskqQeryParams"
                         ref="onOffTaskqQeryParams"
                         :inline="true"
                         label-width="90px"
                       >
                       <el-form-item
                           label="上下线类型"
                           style="margin-right: 20px"
                           prop="changeType"
                         >
                           <el-select
                             v-model="onOffTaskqQeryParams.changeType"
                             clearable
                             filterable
                             placeholder="请选择"
                             style="width: 240px; margin-right: 20px"
                           >
                             <el-option
                               v-for="(item, index) in changeTypeOption"
                               :key="index"
                               :label="item.label"
                               :value="item.value"
                             ></el-option>
                           </el-select>
                         </el-form-item>
                        <el-form-item
                           label="执行状态"
                           style="margin-right: 20px"
                           prop="runStatus"
                         >
                           <el-select
                             v-model="onOffTaskqQeryParams.runStatus"
                             clearable
                             filterable
                             placeholder="请选择"
                             style="width: 240px; margin-right: 20px"
                           >
                             <el-option
                               v-for="(item, index) in runStatusOption"
                               :key="index"
                               :label="item.label"
                               :value="item.value"
                             ></el-option>
                           </el-select>
                         </el-form-item>
                         <el-form-item label="查询时间" prop="dateRange">
                           <el-date-picker
                             style="width: 355px; margin-right: 20px"
                             clearable
                             v-model="TaskDateRange"
                             type="datetimerange"
                             range-separator="至"
                             value-format="yyyy-MM-dd HH:mm:ss"
                             start-placeholder="开始时间"
                             end-placeholder="结束时间"
                           >
                           </el-date-picker>
                         </el-form-item>
                         <el-form-item>
                           <el-button
                             type="primary"
                             icon="el-icon-search"
                             size="mini"
                             @click="onOffTaskHandleQuery"
                             plain
                             >查询</el-button
                           >
                           <el-button
                             icon="el-icon-refresh"
                             size="mini"
                             @click="onOffTaskResetQuery"
                             >重置</el-button
                           >
                         </el-form-item>
                       </el-form>
                   </div>
                   <div :style="{
                      width: '100%',
                      height: `calc(100% - ${$refs.TaskSearchBox && $refs.TaskSearchBox.offsetHeight}px)`,
                      overflowY:'auto',
                      paddingBottom:'15px'
                    }">
                    <el-table
                      v-loading="onOffTaskLoading"
                      :data="['upAndDownLines'].includes(currentOperation)?TaskList:upDownLinesRecordList"
                      border
                      v-sticky-header="{offsetTop: '0px'}"
                      >
                        <el-table-column
                          v-for="(upAnditem,upAndindex) in (['upAndDownLines'].includes(currentOperation)?TaskColumns:upDownLinesRecordColumns)"
                          :key="upAndindex"
                          :prop="upAnditem.prop"
                          :label="upAnditem.label"
                          :width="getColumnWidth(upAndindex,'TaskColumns')"
                          show-overflow-tooltip
                          align="center"
                        >
                          <template slot-scope="upAndScope">
                             <!--执行状态状态单独处理 -->
                            <div v-if="upAnditem.prop === 'runStatusStr'">
                              <el-tag
                                :type="runStatusType(upAndScope.row['runStatus'])"
                              >
                                {{ upAndScope.row[upAnditem.prop] }}
                              </el-tag>
                            </div>
                            <span v-else>
                             {{  upAndScope.row[upAnditem.prop] }}
                            </span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          fixed="right"
                          align="center"
                          label="操作"
                          width="100"
                          v-if="['upAndDownLines'].includes(currentOperation)"
                        >
                        <template slot-scope="addTaskScope">
                          <div class="flex-center">
                            <el-button 
                              style="color: #E6A23C;" 
                              type="text" size="small" 
                              @click="deatilAddTask(addTaskScope.row)"
                              v-hasPermi="['product:addTask:detail']"
                              >
                              详情
                            </el-button>
                            <el-popconfirm
                             title="确定要删除该任务吗？"
                             style="margin-left: 10px"
                             @cancel="hanCancelDel"
                             @confirm="delAddTask(addTaskScope.row)"
                             v-hasPermi="['product:addTask:remove']"
                            >
                              <el-button 
                                slot="reference"
                                style="color: #ff116e;" 
                                type="text" size="small" 
                                >
                                删除
                              </el-button>
                            </el-popconfirm>
                          </div>
                           
                        </template>
                       </el-table-column>
                    </el-table>
                    <!-- 使用分页插件 -->
                    <pagination
                     v-show="onOffTaskTotal > 0"
                     :total="onOffTaskTotal"
                     :page-sizes="[10, 20, 50, 100]"
                     :page.sync="onOffTaskqQeryParams.pageIndex"
                     :limit.sync="onOffTaskqQeryParams.pageSize"
                     @pagination="getOnOffTaskList"
                    />
                  </div>
                  </div>
              </div>
           </div>
        </template>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit('formRef')"
          >确 定</el-button
        >
        <el-button @click="handleClose">取 消</el-button>
      </div> -->
      <!-- 上下线添加任务对话框 -->
      <el-dialog
         title="添加上下线任务"
         width="500px"
         :visible.sync="addTaskShow"
         :before-close="closeAddTask"
         :modal="false"
         :close-on-click-modal="false"
        >
        <el-form :model="addTaskForm" :rules="addTaskRules" ref="addTaskFormRef" label-width="90px">
          <el-form-item
            label="上下线类型"
            prop="changeType"
          >
            <el-select
              @change="handleChangeType"
              v-model="addTaskForm.changeType"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
           >
             <el-option
               v-for="(item, index) in changeTypeOption"
               :key="index"
               :label="item.label"
               :value="item.value"
             ></el-option>
            </el-select>
          </el-form-item>
          <!-- 时间单独处理 -->
          <el-form-item
            label="时间"
            prop="time"
          >
            <template v-if="addTaskForm.changeType === 1 ">
              <el-time-picker
               style="width: 100%"
               is-range
               v-model="addTaskTimeRange"
               range-separator="至"
               start-placeholder="开始时间"
               end-placeholder="结束时间"
               placeholder="选择时间范围">
             </el-time-picker>
            </template>
            <template v-else>
              <el-date-picker
                 style="width: 100%"
                 clearable
                 v-model="addTaskDateRange"
                 type="datetimerange"
                 range-separator="至"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 start-placeholder="开始时间"
                 end-placeholder="结束时间"
                 :default-time="['00:00:00', '23:59:59']"
               >
               </el-date-picker>
            </template>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
              <el-input
                v-model="addTaskForm.remarks"
                placeholder="请输入"
                type="textarea"
                clearable
              />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addTaskHandleSubmit('addTaskFormRef')">保存</el-button>
          <el-button @click="closeAddTask">取 消</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <!-- 机构配置抽屉框 -->
    <AttachConfig ref="attachConfigRef"></AttachConfig>
    <!-- 产品计划组件 -->
    <TimeSlot ref="productPlanRef"></TimeSlot>
    <!-- 城市变价组件 -->
    <cityUpdPrice ref="cityUpdPriceRef"></cityUpdPrice>
    <!-- 授权映射组件-->
    <AuthFill ref="authFillRef"></AuthFill>
  </div>
</template>

<script>
import tableStickyMixins from "@/mixins/tableStickyMixins";
import { mapGetters } from "vuex";
import {
  listDownProduct,
  delDownProduct,
  onOrOff,
  onOffTaskAddValid,
  onOffTaskAdd,
  delOnOffTaskById,
  getOnOffTaskById,
  selectOnOffTaskList,
  onOrOffAuto,
  onOrOffAsyncLock,
  onOrOffShield,
  queryAttachById,
  queryStartQuery,
  setStartQuery,
  isOnLock,
  getExtract,
  isExtract,
  isAuthFill,
} from '@/api/business/productManagement'
import {getDwnCompanyList} from '@/api/business/downCompanyManagement'
import { querySysUserManageList } from "@/api/system/userManage"
import  AttachConfig  from './attachConfig.vue'
import TimeSlot from '@/components/TimeSlot'
import cityUpdPrice from "./cityUpdPrice.vue";
import AuthFill from "./authFill.vue";
import moment from "moment";

export default {
  // 定义名字用于标识该组件是否被keep-alive缓存
  name: "ProductManagement",
  components:{
    AttachConfig,
    TimeSlot,
    cityUpdPrice,
    AuthFill,
  },
  data() {
    return {
      // 产品管理列表
      dataList: [],
      // 管理人筛选项
      manageOptionList: [],
      productTypeOption:[
        { label: "api全流程", value: 1 },
        { label: "api-半流程", value: 2 },
        { label: "CRM(用我们系统)", value: 3 },
      ],
      productLabelOption:[
        { label: "平台", value: 1 },
        { label: "机构", value: 2 },
      ],
      // 查询时间方式
      queryTimeStyle:[
        { label: "添加时间", value: 'addTime' },
        { label: "首次上线", value: 'firstTimeOnline' },
        { label: "最后上线", value: 'lastSeen' },
        { label: "最后下线", value: 'finallyOffline' },
      ],
      // 授权模式筛选项
      authorizationModeOption:[
        { label: "前置授权", value: 0 },
        { label: "后置授权", value: 1 },
      ],
      // 更多推荐产品筛选项
      recommendedProductsOption:[
        { label: "显示", value: 1 },
        { label: "隐藏", value: 0 },
      ],
      // 添加任务类型筛选项
      addTaskTypeOption:[
        { label: "每天", value: 0 },
        { label: "指定", value: 1 },
      ],
      // 添加任务状态筛选项
      addTaskStatusOption:[
        { label: "上线", value: 1 },
        { label: "下线", value: 0 },
      ],     
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      // 时间范围
      dateRange: [],
      loading: false,
      // 表格列信息
      columns: [
        {label: `ID`,prop: "id",visible: true,pcWidth: 140,mobileWidth: 120,fixed: null,showTooltip: true,},
        {label: `产品名称`,prop: "productName",visible: true,pcWidth: 200,mobileWidth: 150,fixed: null,showTooltip: true,},
        {label: `下游公司名称`,prop: "companyName",visible: true,pcWidth: 150,mobileWidth: 120,fixed: null,showTooltip: true,},
        {label: `产品类型`,prop: "productTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `产品标签`,prop: "productLabel",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `数据接收限制`,prop: "pushTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `掩码类型`,prop: "maskLen",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `撞库类型`,prop: "isAll",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `车抵`,prop: "isCar",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
       
        {label: `产品状态`,prop: "status",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `自动回调状态`,prop: "isAuto",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `同步锁状态`,prop: "asyncLock",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `手机号屏蔽状态`,prop: "isShield",visible: true,pcWidth: 120,mobileWidth: 130,fixed: null,showTooltip: true,},
        {label: `星级查询`,prop: "isStartQuery",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `永不下线`,prop: "isOn",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `抽金`,prop: "isExtract",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `授权映射`,prop: "isFill",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        
        {label: `每日推送限量`,prop: "dayCount",visible: true,pcWidth: 130,mobileWidth: 130,fixed: null,showTooltip: true,sortable: true,},
        {label: `下游结算模式`,prop: "downRewardTypeStr",visible: true,pcWidth: 130,mobileWidth: 110,fixed: null,showTooltip: true,},
        {label: `下游结算比例`,prop: "downRewardRatio",visible: true,pcWidth: 130,mobileWidth: 130,fixed: null,showTooltip: true,sortable: true,},
        {label: `产品管理员`,prop: "manageUserName",visible: true,pcWidth: 130,mobileWidth: 110,fixed: null,showTooltip: true,},
        {label: `机构数据权重`,prop: "pushWeightStr",visible: true,pcWidth: 130,mobileWidth: 110,fixed: null,showTooltip: true,},
        {label: `创建时间`,prop: "createTime",visible: true,pcWidth: 160,mobileWidth: 110,fixed: null,showTooltip: true,sortable: true,},
        {label: `操作`,prop: "operation",visible: true,pcWidth: 180,mobileWidth: 100,fixed: "right",showTooltip: true},
      ],
      // 显示搜索栏
      showSearch: true,
      // 弹框标题
      title: "",
      // 弹框显示状态
      dialogShow: false,
      // 弹框的表单信息
      form: {},
      // 弹框表单校验规则
      rules: {
        addTaskType:[
          { required: true, message: "请选择类型", trigger: "change" },
        ],
        addTaskStatus:[
          { required: true, message: "请选择任务", trigger: "change" },
        ],
      },
      // 当前激活项行数据
      row:{},
      // 关联公司筛选项
      companyIdOption: [],
      // 产品状态筛选项
      statusOption:[
        { label: "在线", value: 0 },
        { label: "下线", value: 1 },
        { label: "下线(自动)", value: 3 },
        { label: "停用", value: 2 },
      ],
      // 掩码类型
      maskLenOption:[
        { label: "MD5撞库", value: 0 },
        { label: "表单直推", value: 1 },
        { label: "八位掩码", value: 8 },
        { label: "九位掩码", value: 9 },
      ],
      // 撞库类型
      isAllOption:[
        { label: "全资", value: 0 },
        { label: "非全资", value: 1 },
      ],
       // 车抵
      isCarOption:[
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ],
      // 临时状态变量
      tempStatus:null,
      // 当前激活项行数据
      rowIndex:null,
      // 上下线状态
      upAndDownLinesStates:null,
      // 弹出框对象集合
      popoverElementObj:[],

      // 产品信息对象
      productObj:{},

      // 上下线执行计划总条数
      onOffTaskTotal: 0,
      // 上下线执行计划查询参数
      onOffTaskqQeryParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      // 上下线表格加载状态
      onOffTaskLoading: false,
      // 上下线任务表格数据
      TaskList:[],
      // 上下线任务表格列信息
      TaskColumns:[
        {label: `执行号`,prop: "id",pcWidth: 180,mobileWidth: 120,},
        {label: `上下线类型`,prop: "changeTypeStr",pcWidth: 110,mobileWidth: 120,},
        {label: `开始时间`,prop: "startTime",pcWidth: 180,mobileWidth: 120,},
        {label: `结束时间`,prop: "endTime",pcWidth: 180,mobileWidth: 120,},
        {label: `执行状态`,prop: "runStatusStr",pcWidth: 110,mobileWidth: 120,},
        {label: `产品管理员`,prop: "manageUserName",pcWidth: 110,mobileWidth: 120,},
        {label: `创建人`,prop: "createUserName",pcWidth: 110,mobileWidth: 120,},
        {label: `修改人`,prop: "updateUserName",pcWidth: 110,mobileWidth: 120,},
        {label: `创建时间`,prop: "createTime",pcWidth: 180,mobileWidth: 120,},
        {label: `修改时间`,prop: "updateTime",pcWidth: 180,mobileWidth: 120,},
      ],
      // 上下线任务查询时间
      TaskDateRange:[],
      changeTypeOption:[
        { label: "每天", value: 1 },
        { label: "时间段", value: 2 },
      ],
      runStatusOption:[
        { label: "待执行", value: 0 },
        { label: "执行中", value: 1 },
        { label: "已作废", value: 2 },
      ],
      // 添加任务弹框的表单信息
      addTaskForm: {},
      // 添加任务弹框的校验规则
      addTaskRules: {
        remarks:[
          { required: true, message: "请填写备注", trigger: "blur" },
        ],
      },
      // 添加任务弹框标题
      addTaskTitle: "",
      // 添加任务时间范围
      addTaskTimeRange:null,
      // 添加任务日期范围
      addTaskDateRange:[],
       // 上下线展示筛选项
       upAndDownLinesShowOption:[
        { label: "产品名称", prop: 'productName' },
        { label: "关联公司", prop: 'companyName' },
        { label: "产品状态", prop: 'statusStr' },
      ],
      // 上下线添加任务弹框显示状态
      addTaskShow: false,
     
      // 上线下记录表格数据
      upDownLinesRecordList:[
      ],
      // 上线下记录表格列信息
      upDownLinesRecordColumns:[
      ],


      // 星级查询验证当前激活项行数据
      isStartQueryIndex:null,
      // 星级查询验证状态筛选项
      isStartQueryOption:[
         { label: "关闭", value: 0 },
         { label: "开启", value: 1 },
      ],
      // 星级查询验证参数
      isStartQueryParams: {},
      // 星级查询验证弹框表单校验规则
      isStartQueryRules:{
      },


      // 抽金当前激活项行数据
      extractRowIndex:null,
      // 抽金状态筛选项
      isExtractOption:[
         { label: "关闭", value: 0 },
         { label: "开启", value: 1 },
      ],
      // 抽金参数
      extractParams: {},
      // 抽金弹框表单校验规则
      isExtractRules:{
      },

      
    };
  },
  mixins: [tableStickyMixins],
  watch: {
    columns: {
      handler() {
        this.updateTableHeight();
        // 清空popover激活项索引
        this.rowIndex = null
        this.isStartQueryIndex = null
        this.extractRowIndex = null
        Object.values(this.popoverElementObj) && this.clearElemnetChid(Object.values(this.popoverElementObj))
      },
      deep: true,
    },
    dataList:{
      handler() {
        // 清空popover激活项索引
        this.rowIndex = null
        this.isStartQueryIndex = null
        this.extractRowIndex = null
        Object.values(this.popoverElementObj) && this.clearElemnetChid(Object.values(this.popoverElementObj))
      },
      deep: true,
    },
    // 监听路由参数变化
    // '$route.query.id': {
    //   immediate: true,
    //   handler(newId) {
    //     if (newId) {
    //       console.log('路由变化',newId);
    //       this.handelDialog('上下线管理', JSON.parse(localStorage.getItem('productObj'))||{id:newId});
    //     }
    //   }
    // }
  },
  created() {
    this.init();
    this.getcompanyIdList()
    this.getManageList()
  },
  activated(){
     if(this.$previousRouteUrl === '/business/productManagement/detail'){
        // 只重新刷新数据不重新更新筛选项
        this.init();
     }
     // 清空popover激活项索引
     this.rowIndex = null
     console.log('组件激活');

     // 组件激活后判断是否需要展示上线下弹窗
     if(this.$route?.query?.id){
        this.handelDialog('上下线管理', JSON.parse(localStorage.getItem('productObj'))||{id:newId});
     }
     
  },
  computed: {
    ...mapGetters(["sidebar", "device"]),
    // 对状态进行处理
    statusColor:()=>{
        return (state)=>{
           switch(state){
             case 0:
                return '#67C23A';
             case 1:
                return '#909399';
             case 2: 
                return '#F56C6C';
             case 3:
                return '#f56cb1';
             default:
           }
        }
     },
    // 对状态标签类型进行处理
    tagType:()=>{
        return (state)=>{
           switch(state){
             case 0:
                return 'success';
             case 1:
                return 'info';
             case 2: 
                return 'danger';
             case 3:
                return 'warning';
             default:
           }
        }
    },
    // 对上下线执行状态类型进行处理
    runStatusType:()=>{
        return (state)=>{
           switch(state){
             case 0:
                return 'warning';
             case 1:
                return 'success';
             case 2: 
                return 'danger';
             default:
           }
        }
     },
    //产品标签颜色处理
    productLabelColor:()=>{
        return (state)=>{
           switch(state){
             case 1:
                return 'warning';
             case 2:
                return '';
             case null:
                return 'info';
             default:
           }
        }
    },
    // 将数组转换为对象形式
    ArrayFormatObj:()=>{
        return (arr)=>{
          return arr.reduce((pre, cur)=>{
            pre[cur.value] = cur.label;
            return pre;
          },{})
        }
     },
    // 计算当前列元素在所处环境的宽度
    getColumnWidth() {
      return (index,columName) => {
        if(columName !== 'columns'){
          return this.isMobile
          ? this[columName][index].mobileWidth
          : this[columName][index]?.pcWidth
        }else{
          return this.isMobile
          ? this[columName][index].mobileWidth
          : this?.sidebar?.opened
          ? this[columName][index]?.pcWidth - this.slightWidth
          : this[columName][index]?.pcWidth + 17;
        }
      };
    },
    // (判断当前所处操作)
    currentOperation() {
      switch(this.title){
        case '产品上下线':
          return 'upAndDownLines';
        default:
          // 其他操作
      }
    },
  },
  methods: {
    // 永不下线切换触发回调
    changeIsOn(row) {
      const params = {
        id: row?.id,
        isOn: row?.isOn ? 0 : 1,
      };
      isOnLock(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },
    // 手机号屏蔽切换触发回调
    changeisShield(row) {
      const params = {
        id: row?.id,
        isShield: row?.isShield ? 0 : 1,
      };
      onOrOffShield(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },
    // 自动回调状态切换触发回调
    changeIsAuto(row) {
      const params = {
        id: row?.id,
        isAuto: row?.isAuto ? 0 : 1,
      };
      onOrOffAuto(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },
    // 同步锁状态切换触发回调
    changeAsyncLock(row) {
      const params = {
        id: row?.id,
        asyncLock: row?.asyncLock ? 0 : 1,
      };
      onOrOffAsyncLock(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },
     // 授权映射状态切换触发回调
    changeisAuthFill(row) {
      const params = {
        productId: row?.id,
        isAuthFill: row?.isFill ? 0 : 1,
      };
      isAuthFill(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },
    // 获取关联公司列表
    getcompanyIdList() {
      getDwnCompanyList().then((res) => {
        this.companyIdOption = res.data;
      });
    },
     // 获取管理人列表
     getManageList() {
      querySysUserManageList().then((res) => {
        this.manageOptionList = res?.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$set(this.queryParams, "pageIndex", 1);
      this.getList();
    },
    /** 上下线任务按钮操作 */
    onOffTaskHandleQuery() {
      this.$set(this.onOffTaskqQeryParams, "pageIndex", 1);
      this.getOnOffTaskList();
    },

    // 显示星级查询验证弹出窗回调
    showStartQueryPopo(row) {
      // 设置索引打开弹窗
      this.isStartQueryIndex = row?.id
      // 查询星级查询信息
      queryStartQuery({id: row?.id}).then(res=>{
        if(res.code === 200){
          // 设置星级查询验证状态
          this.$set(this,'isStartQueryParams',{
            ...res?.data,
            // 映射处理处理查询状态
            isStartQuery:res?.data?.isStartQuery?true:false
          })
        }
      })
    },
    // 点击取消星级查询验证
    clickCancelStartQuery(row){
      this.$message.info("取消操作");
      this.isStartQueryIndex = null;
      this.$set(this,'isStartQueryParams',{})
    },
    // 点击提交星级查询验证
    clickSubmitStartQuery(row,formName){
      this.$refs[formName][0].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify(this.isStartQueryParams))
          // 处理查询状态
          params.isStartQuery = params.isStartQuery ? 1:0
          setStartQuery(params).then((res) => {
            if(res.code === 200){
              this.$message.success("操作成功");
              this.getList();
              this.isStartQueryIndex = null;
            }
          });

        }
      })
    },


    // 显示抽金弹出窗回调
    showIsExtractPopu(row) {
      // 查询抽金信息
      getExtract(row?.id).then(res=>{
        if(res.code == 200){
          // 设置抽金表单信息
          this.$set(this,'extractParams',{
            productId: res.data?.productId,
            isExtract: res.data?.isExtract,
            extractRatio: res.data?.extractRatio
          })
        }
      })
      // 设置索引打开弹窗
      this.extractRowIndex = row?.id
    },
    // 点击取消抽金
    clickCancelExtract(row){
      this.$message.info("取消操作");
      this.extractRowIndex = null;
    },
    // 点击提交抽金
    clickSubmitExtract(row,formName){
      this.$refs[formName][0].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify(this.extractParams))
          // console.log(params);
          isExtract(params).then((res) => {
            if(res.code === 200){
              this.$message.success("操作成功");
              this.getList();
              this.extractRowIndex = null;
            }
          });

        }
      })
    },





    
    // 显示上下线弹出窗回调
    showOrOffPopo(row) {
      // 设置上下线状态
      this.upAndDownLinesStates = row?.status
      // 设置索引打开弹窗
      this.rowIndex = row?.id
      // 设置临时变量
      this.tempStatus = row?.status;       
    },
    // popover隐藏回调函数
    popoverHide(){
       var element = document.querySelectorAll('.el-popover');
       element.forEach(pre=>{
        if(pre.getAttribute('x-placement')){
          if(this.popoverElementObj[pre.getAttribute('id')]){
             return
          }else{
             this.popoverElementObj[pre.getAttribute('id')] = pre
          }
        }
       })
    },
    // 清除元素节点
    clearElemnetChid(EleemtArr){
      EleemtArr.forEach(element=>{
        element.parentNode && element.parentNode?.removeChild(element)
      })
    },
    // 点击取消修改上下线状态
    clickCancelOnOrOff(row){
       row.status = this.tempStatus
       this.$message.info("取消操作");
       this.rowIndex = null
    },
    // 点击提交修改上下线状态
    clickSubmitOnOrOff(row) {
      const params = {
        id: row?.id,
        status:this.upAndDownLinesStates,
      };
      if(this.upAndDownLinesStates===this.tempStatus){
        return this.$message.error(`产品已${this.ArrayFormatObj(this?.statusOption)[row?.status]},请勿重复操作！`);
      }
      onOrOff(params).then((res) => {
        if(res.code === 200){
          this.$message.success("操作成功");
          this.getList();
          this.rowIndex = null
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 完全重置到初始状态
      this.$set(this, "queryParams", {
        pageIndex: 1,
        pageSize: 10,
      });
      // 重置时间范围
      this.$set(this, "dateRange", []);
      this.init();
    },
     /** 上下线任务重置按钮操作 */
     onOffTaskResetQuery() {
      // 完全重置到初始状态
      this.$set(this, "onOffTaskqQeryParams", {
        pageIndex: 1,
        pageSize: 10,
      });
      this.getOnOffTaskList();
    },
    init() {
      this.getList();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      if (this.dateRange?.length) {
        this.queryParams.createTimeStart = this.dateRange[0];
        this.queryParams.createTimeEnd = this.dateRange[1];
      }else{
        delete this.queryParams.createTimeStart
        delete this.queryParams.createTimeEnd
      }
      listDownProduct(this.queryParams).then((response) => {
        this.dataList = response?.data?.list;
        this.total = response?.data?.total;
        this.loading = false;
      }).catch((err) => {
        setTimeout(() => {// 延迟2s后自动取消加载状态
          this.loading = false;
        }, 2000);
      })
    },
    /** 查询上下线执行计划列表 */
    getOnOffTaskList() {
      if (this.TaskDateRange?.length) {
        this.onOffTaskqQeryParams.startTime = this.TaskDateRange[0];
        this.onOffTaskqQeryParams.endTime = this.TaskDateRange[1];
      } else {
        delete this.onOffTaskqQeryParams.startTime;
        delete this.onOffTaskqQeryParams.endTime;
      }
      this.onOffTaskLoading = true;
      selectOnOffTaskList({
        ...this?.onOffTaskqQeryParams,
        productId: this.productObj?.id,
      }).then((response) => {
         this.TaskList = response?.data?.list;
        this.onOffTaskTotal = response?.data?.total;
        this.onOffTaskLoading = false;
      });
    },
    // 修改表格高度触发回调
    updateTableHeight() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    // 上下线添加任务打开弹框
    addTask(){
      this.addTaskShow = true
    },
    // 点击删除上下线添加的任务
    delAddTask(row){
       console.log('删除',row);
       delOnOffTaskById(row?.id).then(res=>{
         if(res.code===200){
           this.$message.success('删除成功');
           this.getOnOffTaskList()
         }else{
           this.$message.error('删除失败');
         }
       })
    },
    // 上下线添加的任务详情处理
    deatilAddTask(row){
      console.log('查看详情',row);
      // 做了缓存需要关闭上下线弹框
      this.dialogShow =  false
      // 将产品信息存入本地缓存中
      localStorage.setItem('productObj',JSON.stringify(this.productObj))
      this.$router.push({
            path:'/business/addTaskDetail',
            query:{
              id:row?.id,
            }
      })
    },
    // 获取机构配置信息
    getAttachConfig() {
      queryAttachById({
        id: this.productObj?.id,
      }).then((res) => {
        if (res.code === 200) {
          this.$refs.attachConfigRef.openDrawer({...res?.data})
        }
      });
    },
    // 处理对话框
    handelDialog(title, row = null) {
      row && this.$set(this,'productObj',row)
      console.log(title,row);
      switch (title) {
        case "机构配置":
          this.title = '机构配置';
          // 打开机构配置抽框
          this.getAttachConfig()
          break;
        case "上下线管理":
          // 上下线管理
          this.title = '产品上下线';
          // 上下线执行计划分页查询
          this.getOnOffTaskList();
          this.dialogShow = true;
          break;
        case "产品计划":
          this.title = '产品计划';
          // 打开产品计划组件
          this.$refs.productPlanRef.openHandle(row)
          break;
        case "城市变价":
          this.title = '城市变价';
          // 打开城市变价组件
          this.$refs.cityUpdPriceRef.openHandle(row)
          break;
        case "授权映射":
          this.title = '授权映射';
          // 打开授权映射组件
          this.$refs.authFillRef.openHandle(row)
          break;
        case "添加":
          // 添加操作打开对应产品详情页面
          this.$router.push({
            path:'/business/productManagement/detail',
            query:{
              
            }
          })
          return
        case "编辑":
          // 编辑操作打开对应产品详情页面
          this.$router.push({
            path:'/business/productManagement/detail',
            query:{
              id:row?.id,
              type:'edit'
            }
          })
          return
        case "查看":
          // 查看操作打开对应产品详情页面
          this.$router.push({
            path:'/business/productManagement/detail',
            query:{
              id:row?.id,
              type:'view'
            }
          })
          return
        default:
        // 其他操作
      }
    },
     /*关闭弹窗*/
    handleClose(){
      this.$refs['formRef'].resetFields();
      this.form = this.$options.data().form;
      this.dialogShow = false;

      // 清空上下线任务参数
      this.$set(this,'onOffTaskqQeryParams',{})
      this.$set(this,'TaskDateRange',[])
      // 如果存在路由参数则清空
      if(this.$route.query.id){
        this.$router.push({
          path:this.$route.path,
          query: {},
        });
      }
      // 重置到初始状态
      this.$set(this, "onOffTaskqQeryParams", {
        pageIndex: 1,
        pageSize: 10,
      });
      
    },
    // 关闭添加任务弹窗
    closeAddTask(){
      this.$refs['addTaskFormRef'] && this.$refs['addTaskFormRef'].resetFields();
      this.addTaskForm = this.$options.data().form;
      // 清空时间范围数据
      this.$set(this,'addTaskTimeRange',null)
      this.$set(this,'addTaskDateRange',[])
      this.addTaskShow = false
    },
    // 上下线类型改变回调
    handleChangeType(){
      // 清空时间范围数据
      this.$set(this,'addTaskTimeRange',null)
      this.$set(this,'addTaskDateRange',[])
    },
    // 取消删除
    hanCancelDel(){
      this.$message({
        type: 'info',
        message: '已取消删除操作'
      });
    },
    // 删除列表项
    handelDel(row) {
      let { id } = row
      delDownProduct(id).then(res=>{
        if(res.code === 200) {
          this.$message.success('删除成功')
          this.getList()
        }
      })
      
    },
    /*提交操作*/
    handleSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify(this.form))
          console.log(params);

        }
      })
    },
    /*添加上下线提交操作*/
    addTaskHandleSubmit(formName){
       this.$refs[formName].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify({
            ...this?.addTaskForm,
            // 设置产品id
            productId:this.productObj?.id
          }))
          // 对时间点范围进行处理
          if(this?.addTaskForm.changeType === 1){
            if (this.addTaskTimeRange?.length) {
              params.startTime = moment(this.addTaskTimeRange[0]).format("YYYY-MM-DD HH:mm:ss");
              params.endTime = moment(this.addTaskTimeRange[1]).format("YYYY-MM-DD HH:mm:ss");
            } else {
              delete params.startTime;
              delete params.endTime;
            }
          }else{
            // 对时间段范围进行处理
            if (this.addTaskDateRange?.length) {
              params.startTime = this.addTaskDateRange[0];
              params.endTime = this.addTaskDateRange[1];
            } else {
              delete params.startTime;
              delete params.endTime;
            }
          }
          console.log("上下线任务添加任务",params);
          // 上下线任务添加任务校验
          onOffTaskAddValid(params).then(res=>{
            if(res.code === 200) {
              onOffTaskAdd(params).then(res=>{
                if(res.code === 200) {
                  this.$message.success('添加成功')
                  this.closeAddTask()
                  this.getOnOffTaskList()
                }
              })
            }else{
              this.$message.error(res?.msg)
            }
            
          })

        }
      })
    },
    
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 20px;
  color: #333333;
  font-weight: 500;
}
.search-box {
  margin: 0 0 20px;
  padding: 20px 20px 0;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}
.search-area {
  position: absolute;
  right: 20px;
}
.el-form-item__content {
  flex: 1;
  line-height: 40px;
  position: relative;
  font-size: 14px;
  min-width: 0;
}
::v-deep .el-dialog__body{
  border-top: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
  padding: 20px;
}
.el-table {
  // 滚动条加粗
  --scrollbar-height: 9px;
}
.TaskTable{
  ::v-deep ::-webkit-scrollbar {
    width: 8px; // 横向滚动条
    height: 8px; // 纵向滚动条
  }
  ::v-deep .el-table__header-wrapper {
    // overflow: visible !important; // 表头此时不会随着body左右滚动了
    height: 55px !important;  // 这个方案更推荐！！！
  }
}
</style>
